<header>
    纹理贴图
</header>
<p>
    前面说了，材质除了可以设置纯色color外，还可以有别的选择，我们这里就来说明如何使用image来设置材质（也就是二维纹理 TEXTURE_2D）。
</p>
<h2>
    解释说明
</h2>
<p>
    简单的理解就是，把一张图片按照一定的映射关系贴到几何体的表面（说是三角形可能更准确些吧，大概～）。
</p>
<p>
    所以，我们在原来绘制的基础上，需要传递一张图片和图片坐标到几何体坐标的映射数据。
</p>
<h2>
    绘制
</h2>
<h3>
    准备图片
</h3>
<p>
    这步比较简单，只要是TexImageSource类型即可（包括：HTMLImageElement | ImageBitmap | ImageData | HTMLCanvasElement | HTMLVideoElement |
    OffscreenCanvas），我们这里选择HTMLImageElement：
</p>
<pre tag="javascript">
var image = new Image();
image.onload = function () {
    // 这里直接就是image
};
image.src = "./images/girl.jpeg"
</pre>
<h3>
    坐标映射
</h3>
<p>
    比如有1个三角形，那就是3个点，所谓的映射就是把图片贴上三角形的时候，这个三角形的每个点对应图片的位置。
</p>
<p>
    我们这里是准备使用索引绘制2个三角形，一共4个点，如果看出矩形的话，点的位置依次就是：左上、右上、左下、右下。所以，和图片坐标的对应也是左上(0, 0)、右上(1, 0)、左下(0, 1)、右下(1, 1)
</p>
<div class="warn">
    温馨提示：图片的坐标这里称为UV坐标，原点在图片的左上角，x轴向右，y轴向下，不管图片多大，取值范围都为0～1。
</div>
<p>
    代码如下：
</p>
<pre tag="javascript">
attributes: {
    position: {
        array: [
            -0.8, 1, 0,
            0.8, 1, 0,
            -0.8, -1, 0,
            0.8, -1, 0
        ],
        count: 4,
        itemSize: 3
    },
    uv: {
        array: [
            0, 0,
            1, 0,
            0, 1,
            1, 1
        ],
        count: 4,
        itemSize: 2
    }
}
</pre>
<p>
    其中uv表示纹理坐标，用以设置映射关系。
</p>
<p>
    下面是完整的例子代码：
</p>
<example tag="course/webgl_4" height="340px"></example>